<script setup>
import {onMounted, ref} from "vue";
import router from "../modules/router.js";
import {crawlPracticalExercisesActivity} from "@/api/api.js";


const list = ref([
  {
    title: "同城聚会（组员版）",
    content: "2023年2月实战活动",
  },
  {
    title: "同城聚会",
    content: "2023年2月实战活动",
  },
  {
    title: "快团团社群团购",
    content: "2023年2月实战活动",
  },
  {
    title: "视频号短视频带货",
    content: "2023年2月实战活动",
  },
  {
    title: "朋友圈运营",
    content: "2023年2月实战活动",
  },
  {
    title: "社群运营",
    content: "2023年2月实战活动",
  },
  {
    title: "公众号爆文写作",
    content: "2023年2月实战活动",
  },
  {
    title: "小红书爆款笔记",
    content: "2023年2月实战活动",
  },
  {
    title: "小红书 IP",
    content: "2023年2月实战活动",
  },
  {
    title: "小红书店铺",
    content: "2023年2月实战活动",
  },
  {
    title: "抖音高客单项目",
    content: "2023年2月实战活动",
  },
  {
    title: "英文工具站",
    content: "2023年2月实战活动",
  },
  {
    title: "视频号直播带货",
    content: "2023年2月实战活动",
  },
  {
    title: "视频号短视频带货",
    content: "2023年2月实战活动",
  },
  {
    title: "TikTok 短视频带货",
    content: "2023年2月实战活动",
  },
]);

const getCrawlPracticalExercisesActivity = () => {
  crawlPracticalExercisesActivity({
    pageNo: 1,
    pageSize: 10
  }).then(res => {
    console.log(res)
    list.value = []
    list.value = res.result.records
  })
}
onMounted(() => {
  getCrawlPracticalExercisesActivity()
})
const onClickLeft = () => {
  router.push("/");
};
const toActivity = () => {
    router.push("/activity");
}
</script>
<template>
  <van-nav-bar
    title="往期实战活动"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="box" v-for="(item, index) in list" :key="index">
    <div style="width: 100%">
      <div class="boxTitle">{{ item.name }}</div>
      <div class="boxContent">
        {{ item.templateTarget }}
      </div>
    </div>
    <van-button
      type="primary"
      size="small"
      style="width: 120px"
      @click="toActivity"
      >进入活动</van-button
    >
  </div>
</template>
<style scoped>
.boxContent {
  font-size: 14px;
}
.boxTitle {
  font-size: 20px;
  font-weight: 600;
}
.box {
  padding: 10px;
  display: flex;
  border-bottom: 1px solid #cfcfcf;
  align-items: center;
}
</style>
